<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { Plus } from "@element-plus/icons-vue"//导入啡一id生成器
import { nanoid } from 'nanoid'
// 、、:/导出插件<el-icon><Plus /></el-icon>
import download from 'downloadjs'//导入抠图插件
import imglyRemoveBackground from '@imgly/background-removal'
import { ElMessage } from "element-plus"
//默认显示关闭弹框
const dialogVisible = ref(false)//抠图事件
const handleManualCutout = () => {
  //  console.log(xxxxxbbbbdddddddd);
  // console.log("11111111111111119");
  // alert('444444444444440')
  dialogVisible.value = true
}
// /开始选择图片地址
const originUrl: any = ref("")
// /选择图片
const changeImg = (uploadFile: any) => {//选择图片信息
  //定义读取文件对象
  const fileReader = new FileReader()//读取选择的文件读取为base64的格式
  fileReader.readAsDataURL(uploadFile.raw)
  fileReader.onload = function () {
    // l/
    // this.result表示读取的结果
    originUrl.value = this.result
  }
}
//生成抠图的图片
const targetUrl = ref(' ')
// / / loading 默认不加载
const loading = ref(false)

const startMatting = () => {
  //显示加载状态
  loading.value = true//调用第三方插件抠图
  imglyRemoveBackground(originUrl.value).then((blob: Blob) => {
    //转成一个src链接
    targetUrl.value = URL.createObjectURL(blob);//关闭加载
    loading.value = false
  })
  // /下载
}
const downBtn = () => {
  if (!originUrl.value) {
    ElMessage({
      message: '请先选择要抠的图片',
      type: 'error'
    })
    return false
  }
  if (!targetUrl.value) {
    ElMessage({
      message: '目前没有生成抠图的图片',
      type: 'error'
    })
    return false
  }
  const url = targetUrl.value
  // il fetch是发送请求
  fetch(url).then(resp => resp.blob()).then(blob => {
    //根据链接请求到的文件信息
    download(blob, nanoid() + '.png', 'image/png')
  })
}



const handleclose = () => {
  //关闭加载
  loading.value = false
  dialogVisible.value = false//清空原图
  originUrl.value = ''//清空抠图
  targetUrl.value = ''
}


</script>

<template>
  <div class="one">
    <el-button @click="handleManualCutout" class="btnlist">智能抠图</el-button><!--弹框-->
    <el-dialog v-model="dialogVisible" title="智能抠图" width="70%" :before-close="handleclose">
      <div class="tanBox" v-loading="loading">
        <div class="tanItem">
          <!--左-->
          <div class="left">
            <el-upload class="upload_box" :show-file-list="false" :on-change="changeImg" :auto-upload="false">
              <img v-if="originUrl" :src="originUr1" alt="" class="origin_img">
              <el-icon v-else class="left-icon">
                <Plus />
              </el-icon></el-upload>
          </div>
          <el-button class="start_btn" @click="startMatting">开始抠图</el-button><!--右-->
          <div class="right">
            <img class="target_img" v-if="targetUrl" :src="targetUrl" alt="" />
            <span v-else class="matte_text">生成的抠图在这</span>
          </div>
        </div>
      </div>
      <el-button type="primary" class="down_load" @click="downBtn">下载</el-button>
    </el-dialog>
  </div>
</template>


<style lang='scss' scoped>
.csn {
  font-size: 16px;
}
.btnlist{
  margin-top: -12%;
  font-size: 15px;
}
</style>